import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { TabBar, Toast } from 'antd-mobile';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';

import styles from './Footer.less';
import { goToPage } from "../utils/helper"
import { Modal } from 'antd-mobile';
import { isNull } from '../utils/request';
import MIcon from '../components/MIcon';
@connect(({ global }) => {
	return ({
		global: global
	})
})
export default class Footer extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			showHeaderArr: ["/", "/form", "/page"]
		}
	}
	render() {
		let { dispatch, children, location, global } = this.props;
		let { pathname, search } = location;
		let { showHeaderArr } = this.state;
		let { globalMenu: footer } = global;
		let isFooter = false;
		footer.map(item => {
			if (pathname + search === item.path) {
				isFooter = true
			}
		});
		if (!isFooter || footer.length == 1) {
			document.getElementById("root").className = "no-footer"
			document.getElementById("root").class = "no-footer"
			localStorage[MI_APP_CODE+"noFooter"] = true;
			return (
				<div className="no-footer">
				</div>
			)
		}
		else {
			document.getElementById("root").className = ""
			document.getElementById("root").class = ""
			localStorage[MI_APP_CODE+"noFooter"] = false;
		}
		return (
			<div className={styles.footer}>
				<TabBar
					unselectedTintColor="#000"
					// unselectedTintColor="#949494"
					tintColor="#1890ff"
					barTintColor="white"
					hidden={false}
				>
					{
						footer.map((item, k) => {
							let { icon, selectedIcon, label, path, open_type, icon_type, icon_unselected_color, icon_selected_color } = item;
							let selected = location.pathname + location.search === path;
							if (isNull(icon_type)) {
								icon_type = "img"
							}
							let tabIcon, tabSelectedIcon, title;
							if (icon_type == "img") {
								tabIcon = <img src={icon} alt="" style={{ width: "25px", height: "25px" }} />;
								tabSelectedIcon = <img src={selectedIcon} alt="" style={{ width: "25px", height: "25px" }} />;
								title =  label 
							}
							else if (icon_type == "icon") {
								tabIcon = <MIcon type={icon} style={{ fontSize: "25px", color: icon_unselected_color }} />;
								tabSelectedIcon = <MIcon type={icon} style={{ fontSize: "25px", color: icon_selected_color }} />;
								let labelColor = icon_unselected_color;
								if (selected) {
									labelColor = icon_selected_color;
								}
								title = <span style={{ color: labelColor }}>{label}</span>;
							}
							return <TabBar.Item
								title={title}
								key={k}
								icon={tabIcon}
								selectedIcon={tabSelectedIcon}
								selected={selected}
								onPress={() => {
									if (("#" + path) === window.location.hash) {
										return;
									}
									let config = {
										url: path,
										state: {
											// title: label
										},
										open_type
									}
									goToPage({
										dispatch,
										config
									})
								}}
							>
								{children}
							</TabBar.Item>
						})
					}
				</TabBar>
			</div>
		);
	}
}
